<template>
  <div class="productSales">
    <stitle :bg="bg" text="当月销售数据统计(产品)" :type="0" />
    <div id="echartProSales"></div>
  </div>
</template>

<script>
import stitle from "@/components/common/stitle";
export default {
  name: "productSales",
  components: {
    stitle,
  },
  data() {
    return {
      bg: require("@/assets/images/DispatchCommand/stitle.png"),
      edata: [
        { value: 40, name: "超力福" },
        { value: 18, name: "光达" },
        { value: 22, name: "新达" },
        { value: 10, name: "华光树脂" },
        { value: 10, name: "其他" },
      ],
      total: 100,
    };
  },
  mounted() {
    this.setEchart();
  },
  methods: {
    setEchart() {
      const _echarts = this.$echarts.init(
        document.getElementById("echartProSales")
      );
      const option = {
        legend: {
          itemWidth: 15,
          itemHeight: 10,
          bottom: "0px",
          textStyle: {
            fontSize: 12,
            color: "#fff",
          },
        },
        color: ["#409EFF", "#06FDFA", "#36E879", "#FE6C00", "#FFDE00"],
        series: [
          {
            type: "pie",
            radius: [50, 70],
            center: ["50%", "45%"],
            label: {
              show: true,
              position: "center",
              normal: {
                formatter: function (params) {
                  let res = `{a| ${params.percent}%}`;
                  return res;
                },
                rich: {
                  a: {
                    color: "#fff",
                    fontSize: 14,
                  },
                },
              },
            },
            data: this.edata,
          },
          {
            type: "pie",
            radius: [50, 70],
            center: ["50%", "45%"],
            label: {
              show: true,
              position: "center",
              formatter: `{a|${this.total}} \n {b|总览}`,
              rich: {
                a: {
                  fontSize: 20,
                  height: 30,
                  color: "#FFDE00",
                },
                b: {
                  fontSize: 14,
                  color: "#fff",
                },
              },
            },
            data: this.edata,
          },
        ],
      };
      _echarts.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.productSales {
  width: 100%;
  padding-left: 60px;
  box-sizing: border-box;
  #echartProSales {
    width: 100%;
    height: 220px;
  }
}
</style>
